<template>
	<view class="container">
		<view class="tit" @click="popup">
			<text>{{title ? title : '选择机柜'}}</text>
			<image src="/static/img/detail/right.png" mode="widthFix"></image>
		</view>
		<!--		日历-->
<!--		<u-calendar  :defaultDate="defaultDateMultiple" :show="show" mode="multiple" @confirm="confirm"></u-calendar>-->
		<u-calendar v-model="show" mode="date" :orderData="orderData" @changeMonthHandler="changeMonthHandler"></u-calendar>
		<view class="mask" v-if="operation">
			<view class="operation">
				<view class="tit">
					<text @click="select">全选</text>
					<text>设备列表</text>
					<text @click="confirm">确认</text>
				</view>
				<scroll-view class="list" scroll-y="true">
					<view class="list_item" v-for="(item,index) in list" :key="item.id">
						<view class="left">
							<image src="/static/img/agent/battery.png" mode="widthFix"></image>
							<view>
								<view>
									{{item.name}}
								</view>
								<view class="money">
									总收入<text>￥{{item.all_income}}</text>
								</view>
							</view>
						</view>
						<view class="right">
							<radio :checked="item.isCheck" color="#34ACEF" @click="radio(index)" />
						</view>
					</view>
				</scroll-view>
			
			</view>
		</view>
	
	</view>
</template>

<script>
import {
	reportForm,
	batteryList, dayIncome
} from '../../../api/api.js'
export default {
	data() {
		return {
			operation: false,
			report: false,
			list: [],
			ids: [],
			dataList: [],
			limit: 10,
			current_page: 1,
			total: 0,
			last_page: 1,
			title: '',
			name: '',
			show: true,
			orderData:[],
			currentMonth:this.getCurrentMonth()
		}
	},
	onLoad() {
		this.getList();
		this.getDayDay();
	},
	methods: {
		getCurrentMonth() {
			const now = new Date(); // 创建一个表示当前时间的Date对象
			const year = now.getFullYear();
			const month = now.getMonth() + 1; // 获取月份，并加1以转换为人类习惯的月份表示
			return year+'-'+(month<10? month.toString().padStart(2, '0'):month);
		},
		popup() {
			this.operation = true
		},
		radio(index) {
			this.ids = []
			this.list[index].isCheck = !this.list[index].isCheck;
			this.name = this.list[index].name;
			if (this.list[index].isCheck == true) {
				this.ids.push(this.list[index].device_id)
			} else {
				for (let i = 0; i < this.ids.length; i++) {
					if (this.ids[i] == this.list[index].id) {
						this.ids.splice(i, 1)
					}
				}
			}
			console.log(this.ids)
		},
		select() {
			for (let i = 0; i < this.list.length; i++) {
				this.list[i].isCheck = true
			}
			// setTimeout(function() {
			
			// }, 1000);
			this.operation = false
			this.report = true
			this.ids = []
			this.getDayDay();
		},
		confirm() {
			this.ids = []
			if (this.list.findIndex(i => i.isCheck === true) == -1) {
				uni.showToast({
					icon: 'none',
					title: '请选择机柜'
				})
			} else {
				console.log(this.list.filter(i => i.isCheck == true))
				let list = this.list.filter(i => i.isCheck == true)
				
				for (let i = 0; i < list.length; i++) {
					this.ids.push(list[i].device_id)
				}
				
				this.operation = false
				this.report = true;
				this.title = this.name;
				this.getDayDay();
			}
		},
		getList() {
			batteryList().then(res => {
				console.log(res)
				for (let i = 0; i < res.data.length; i++) {
					res.data[i].isCheck = false
				}
				this.list = res.data
			})
		},
		loadMore() {
			if (this.current_page < this.last_page) {
				this.current_page += 1
				this.getDayDay();
			} else {
			
			}
		},
		changeMonthHandler(val){
			this.currentMonth = val;
			this.getDayDay();
		},
		getDayDay(){
			let device_id = ''
			if (this.ids.length == 0) {
				// console.log(11111111)
			} else {
				console.log(this.ids)
				for (let i = 0; i < this.ids.length; i++) {
					device_id += this.ids[i] + ','
				}
				device_id = device_id.substring(0, device_id.length - 1)
			}
			dayIncome({
				device_id: device_id,
				month:this.currentMonth
			}).then(res => {
				console.log("res.data",res.data)
				this.orderData = res.data;
			})
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 100%;
	background-color: #f6f6f6;
}

.tit {
	width: calc(100%);
	height: 100upx;
	background-color: #FFFFFF;
	padding: 0 30upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	image {
		width: 15upx;
	}
}

.report {
	width: 100%;
	background-color: #FFFFFF;
	margin-top: 30upx;
	
	.title {
		width: calc(100% );
		height: 130upx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		
		.content {
			width: 80%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			
			view {
				width: 30%;
				background-color: #FFFFFF;
				height: 50%;
				display: flex;
				align-items: center;
				// justify-content: space-around;
				
				.spot {
					width: 15upx;
					height: 15upx;
					border-radius: 50%;
					margin: 0 10upx;
				}
				
				.blue {
					background-color: #46b5ff;
				}
				
				.green {
					background-color: #37c666;
				}
				
				.red {
					background-color: #ff6566;
				}
				
				.orange {
					background-color: #ffa240;
				}
				
				.violet {
					background-color: #e274ff;
				}
				
				.lightBlue {
					background-color: #19d8c9;
				}
				
			}
			
		}
	}
	
	.con {
		width: auto;
		height: 1600upx;
		padding: 15upx 30upx 0;
		border-top: 1upx solid #eae7eb;
		
		.item {
			min-height: 170upx;
			
			.date {
				height: 40upx;
			}
			
			.content {
				width: 80%;
				float: right;
				height: 130upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				
				view {
					width: 30%;
					background-color: #FFFFFF;
					height: 50%;
					display: flex;
					align-items: center;
					// justify-content: space-around;
					
					.spot {
						width: 15upx;
						height: 15upx;
						border-radius: 50%;
						margin: 0 10upx;
					}
					
					.blue {
						background-color: #46b5ff;
					}
					
					.green {
						background-color: #37c666;
					}
					
					.red {
						background-color: #ff6566;
					}
					
					.orange {
						background-color: #ffa240;
					}
					
					.violet {
						background-color: #e274ff;
					}
					
					.lightBlue {
						background-color: #19d8c9;
					}
					
				}
				
			}
			
		}
		
		
	}
	
	.empty {
		border-top: 1upx solid #eae7eb;
		width: 100%;
		height: 100upx;
		background-color: #FFFFFF;
		text-align: center;
		line-height: 100upx;
	}
}




.mask {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 99;
	background: rgba($color: #000000, $alpha: 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	
	.operation {
		width: 580upx;
		// height: 200upx;
		padding: 10upx 0;
		background: #FFFFFF;
		border-radius: 12px;
		position: relative;
		overflow: hidden;
		
		.tit {
			width: calc(100%);
			height: 60upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.list {
			width: 100%;
			background-color: #FFFFFF;
			height: 600upx;
			
			.list_item {
				width: calc(100%);
				height: 150upx;
				margin: 0 auto;
				border-bottom: 1upx solid #e9e6e9;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.left {
					display: flex;
					align-items: center;
					
					image {
						width: 80upx;
						margin-right: 10upx;
					}
					
					view {
						font-size: 28upx;
						
						.money {
							font-size: 24upx;
							color: #999999;
							
							text {
								color: #fb817f;
							}
						}
					}
					
					// text {
					// 	font-size: 24upx;
					// 	color: #999;
					// }
				}
				
				.right {
					display: flex;
					align-items: center;
					
					input {
						min-width: 250upx;
						text-align: right;
						margin-right: 10upx;
					}
					
					text {
						font-size: 28upx;
						color: #999999;
					}
					
					image {
						width: 15upx;
						margin-left: 10upx;
					}
				}
				
				.img {
					image {
						width: 40upx;
					}
				}
			}
			
		}
	}
}
@media screen and (min-width:800px){
	.con{
		height:calc(100vh - 380upx)!important;
	}
}


</style>
